<template>
  <div class="page-mentor">
    <BaseBg bgc="#fff"/>
    <RefreshTop ref="vRefreshTop" @reload="reload" :minHeight="refreshMinHeight">
      <div class="content">
        <ul class="content-list"  @click="onItemClick">
          <li class="content-listItem" v-for="(d,i) of listData" :key="d['teacher_user_id']">
            <div class="c-img none">
              <img v-if="d['teacher_avatar']" :src="d['teacher_avatar']" alt="" class="have-img">
            </div>
            <div class="text">
              <p class="text-item">
                <span class="name">{{d['teacher_user_name']}}</span>
                <!-- <span class="subject">（历史）</span> -->
              </p>
              <p class="text-item">
                <span class="grade">{{subjects(d.subjects)}}</span>
              </p>
              <p class="text-item">学校：
                <span class="school">{{d.school_name}}</span>
              </p>
            </div>
            <BaseButton :_data.prop="d" :data-index="i" data-type="teacher">取消关系</BaseButton>
            <BaseButtonBorder s="gray2" class="btn-view-record" :_data.prop="d" :data-index="i" data-type="teacher">查看记录</BaseButtonBorder>
          </li>
          <li class="content-listItem" v-for="(d,i) of listDataStudent" :key="d['student_user_id']">
            <div class="c-img none">
              <img v-if="d['student_avatar']" :src="d['student_avatar']" alt="" class="have-img">
            </div>
            <div class="text">
              <p class="text-item">
                <span class="name">{{d['student_user_name']}}</span>
                <!-- <span class="subject">（历史）</span> -->
              </p>
              <p class="text-item">
                <span class="grade">{{subjects(d.subjects)}}</span>
              </p>
              <p class="text-item">学校：
                <span class="school">{{d.school_name}}</span>
              </p>
            </div>
            <BaseButton :_data.prop="d" :data-index="i" data-type="student">取消关系</BaseButton>
            <BaseButtonBorder class="btn-view-record" :_data.prop="d" :data-index="i" data-type="student">查看记录</BaseButtonBorder>
          </li>
        </ul>
      </div>
      <div ref="noData" class="no-data l-no-data" v-show="noData"></div>
    </RefreshTop>
    <BaseMask v-if="popupMaskShow" />
    <VPopup ref="vPopup">{{popupDes}}</VPopup>
  </div>
</template>

<script>
import BaseBg from '../BaseBg'
import BaseMask from '@/modules/mask/VMask'
import VPopup from './VPopup'
import BaseButton from '../BaseButton'
import BaseButtonBorder from '../BaseButtonBorder'
import axiosGeneral from '@/modules/ajax-mid/axios-general.js'
import getUserInfo from '@/modules/ajax-mid/get-user-info.js'
import RefreshTop from '@/modules/refresh-top'
// import debugMsg from '@/modules/popup/debug-msg.js'
export default {
  // props: {
  //   type: String // teacher student
  // },
  data () {
    return {
      popupMaskShow: false,
      listData: [],
      listDataStudent: [],
      noData: false,
      refreshMinHeight: 0,
      popupDes: ''
    }
  },
  // computed: {
  //   isApprentice () {
  //     return this.type === 'teacher'
  //   }
  // },
  created () {
    this.reload()
  },
  mounted () {
    this.setMinHeight()
  },
  methods: {
    onItemClick (e) {
      let { target } = e
      if (target.tagName === 'BUTTON') {
        if (target.classList.contains('btn-view-record')) {
          this.viewRecords(target)
        } else {
          this.relieveRelation(target)
        }
      }
    },
    // 解除关系
    relieveRelation (target) {
      let { vPopup } = this.$refs
      this.popupMaskShow = true
      let isApprentice = target.dataset.type === 'teacher'
      this.popupDes = isApprentice ? '是否要解除与导师的关系？解除后您将没有相关的查、阅、评等权限' : '是否要移除该成员？移除后您将没有相关的查、阅、评等权限'
      vPopup.show(isConfirm => {
        if (isConfirm) {
          let index = target.dataset.index * 1
          getUserInfo().then(userInfo => {
            if (userInfo) {
              let postData
              if (isApprentice) {
                postData = {
                  teacher_user_id: target._data.teacher_user_id,
                  student_user_id: userInfo.user_id
                }
              } else {
                postData = {
                  teacher_user_id: userInfo.user_id,
                  student_user_id: target._data.student_user_id
                }
              }
              return axiosGeneral.post('/lecture/v1/deleteTeacherStudent', postData).then(data => {
                if (data) {
                  if (data.success) {
                    this.$toast.success('取消成功')
                    this.listData.splice(index, 1)
                  } else {
                    this.$toast.error('取消失败')
                  }
                }
              })
            }
          })
        }
        this.popupMaskShow = false
        vPopup.close()
      })
    },
    viewRecords (target) {
      let data = target._data
      let userId = data.student_user_id || data.teacher_user_id
      // window.nativeJsMentor.viewRecords(JSON.stringify({
      window.oa.viewRecords(JSON.stringify({
        user_id: userId,
        school_id: data.school_id,
        campus_id: data.campus_id
      }))
    },
    subjects (subjects) {
      let str = ''
      subjects && subjects.forEach(s => {
        str += '、' + s.subject_name
      })
      return str.substr(1)
    },
    reload (complete) {
      axiosGeneral.get(`/lecture/v1/myPeers`).then(data => {
        if (data) {
          // this.noData = (this.listData = data[this.type + 's']).length === 0
          let listData = this.listData = data.teachers
          let listDataStudent = this.listDataStudent = data.students
          this.noData = listData.length === 0 && listDataStudent.length === 0
        }
        complete && complete()
      })
    },
    setMinHeight () {
      // 下拉刷新内容太少，高度不够解决方案
      let winHeight = window.innerHeight
      this.refreshMinHeight = winHeight - 10
      this.$refs.noData.style.height = winHeight - 130 + 'px'
    }
  },
  components: {
    BaseMask,
    VPopup,
    BaseButton,
    BaseButtonBorder,
    RefreshTop,
    BaseBg
  }
}
</script>

<style scoped>
.content {
}
.content-listItem {
  position: relative;
  margin-top: 16px;
  padding: 0 14px;
  background-color: #fff;
  overflow: hidden;
}
.c-img {
  width: 70px;
  height: 70px;
  margin: 16px 20px 12px 0;
  /* margin-right: 20px; */
  /* border-radius: 10px; */
  border-radius: 100px;
  float: left;

  &.none {
    background-image: url("./avatar-none.png");
    background-size: 100% auto;
  }
}
.have-img {
  width: 100%;
  height: 100%;
}
.text {
  padding-top: 16px;
  padding-right: 86px;
  font-size: 15px;
  color: #999;
  line-height: 24px;
}
.name {
  font-size: 18px;
  color: #333;
}
.page-mentor {
  .b-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    /* border-radius: 5px; */
    height: 28px;
    width: 84px;
    padding: 0;
    font-size: 14px;
    box-sizing: border-box;
  }
  .btn-view-record {
    top: 52px;
  }
}
.grade {
  color: #81b3fd;
}

.l-no-data {
  background-size: 50% auto;
  pointer-events: none;
}
</style>
